<template>
<Modal title="课程内容" :isOpen="isOpen" @close="emit('close')">
    <div class="w-[18rem] lg:min-w-[35rem]  max-h-[30rem]">
        <div v-for="(item, index) in courseStore.courseData.content" :key="index" 
        class="card bg-base-100 shadow-sm hover:shadow-md transition-shadow duration-200 w-full my-4 cursor-pointer" >
            <div class="card-body p-4 flex flex-col sm:flex-row items-center gap-4" >
                <div class="badge badge-primary badge-lg">{{ index + 1 }}</div>
                <div class="flex-grow"  @click="toIndexData(index)">
                <h2 class="card-title text-primary mb-1">{{ item.english }}</h2>
                <p class="text-base-content/70">{{ item.chinese }}</p>
                <p class="text-base-content/60 text-sm text-gray-500">{{item.mark}}</p>
                </div>
                <button class="btn btn-circle btn-ghost btn-sm" @click="playAudio(item.english)">
                    <SpeakerWaveIcon class="w-5 h-5" />
                </button>
            </div>
            </div>
        </div>
  </Modal>
</template>
<script setup>
defineProps({
    isOpen: {
        type: Boolean,
        default: false
    }
})
import {
    SpeakerWaveIcon,
} from '@heroicons/vue/24/solid'
import {useCourseStore} from "~/stores/course";
import {usePlayAudio} from "~/composables/common/playAudio";
const {playAudio} = usePlayAudio();
const courseStore = useCourseStore();
const emit = defineEmits(['close'])
const toIndexData = (index) => {
    emit('close');
    courseStore.toIndexData(index);
}
</script>